<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>三角 角标案列</title>
	</head>
	<!--
    transform	适用于2D或3D转换的元素	3
    transform-origin ： x-axis y-axis z-axis;	允许您更改转化元素位置
 -->
	<body>
		<div class="box">
			<span class="r-t-span"></span>
		</div>

		<div class="box">
			<span class="l-t-span"></span>
		</div>

		<div class="box">
			<span class="r-t-span-2">热门</span>
		</div>

		<div class="box">
			<span class="l-b-span-2">热门</span>
		</div>

		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 200px;
				height: 100px;
				background: pink;
				position: relative;
				overflow: hidden;
				margin: 20px auto;
			}

			.r-t-span {
				width: 50px;
				height: 25px;
				display: block;
				background: teal;
				opacity: 0.8;
				position: absolute;
				top: 0;
				right: 0;
				transform: translate(29.29%, -100%) rotate(45deg);
				transform-origin: left bottom;
			}

			.r-t-span-2 {
				font-size: 13px;
				line-height: 32px;
				background: orange;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 2;
				padding: 0 2em;
				transform-origin: left bottom;
				transform: translate(29.29%, -100%) rotate(45deg);
			}

			.l-b-span-2 {
				font-size: 13px;
				line-height: 32px;
				background: orange;
				position: absolute;
				z-index: 2;
				padding: 0 2em;
				left: 0;
				bottom: 0;
				transform-origin: right top;
				transform: translate(-29.29%, 100%) rotate(45deg);
			}

			.l-t-span {
				width: 50px;
				height: 25px;
				display: block;
				background: teal;
				opacity: 0.8;
				position: absolute;
				top: 0;
				left: 0;
				transform: translate(-29.29%, -100%) rotate(-45deg);
				transform-origin: right bottom;
			}
		</style>
	</body>
</html>
